<template>
  <div id="home" class="b_img">
    <div class="rootMain">
      <Scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="scroll-box" style="position:relative;">
          <!-- <div class="top">
            <div :class="['planet',animation?'planetA':'']"></div>
            <div :class="['planetCover',animation?'planetCoverA':'']"></div>
            <div :class="['planetCover1',animation?'planetCover1A':'']"></div>
            <div class="coins">
              <div
                class="coin"
                v-show="item.hideItem"
                v-for="(item,index) in coinsList"
                :key="index"
              >
                <label :class="[item.state?'':'addCoin']">+{{item.profit}}</label>
                <div :class="['coinItem',item.state?'':'hideItem']" @click="charge(item,index)"></div>
              </div>
            </div>
            <div class="notice" v-show="false">
              <van-notice-bar
                text="GCC新版上线了，理财和活动功能完善，各种福利发放快来领取吧~"
                left-icon="volume-o"
                mode="closeable"
                color="#fff"
                background="rgba(255, 255, 255, 0.06)"
              />
            </div>
          </div>
          <div class="leftMenu">
            <div class="menuBox">
              <div class="menuList">
                <p @click="$router.push(`/assets`)">
                  <span>{{$t('m.availableBalance')}}</span>
                  <img src="@/assets/img/new2/logo@2x.png" alt />
                  <label>{{userObj.availableAmount}} GCC</label>
                </p>
                <p style="position:relative;" @click="$router.push(`/assets`)">
                  <span>{{$t('m.lockingAssets')}}</span>
                  <img src="@/assets/img/new2/logo2@2x.png" alt />
                  <label>{{freezeGccValue}} GCC</label>
                </p>
              </div>
            </div>
          </div>-->
          <!-- 顶部banner -->
          <van-swipe :autoplay="5000" indicator-color="white" class="headerBanner">
            <van-swipe-item v-for="(e,i) in bannerlist" :key="i">
              <img :src="e.imageUrl" />
            </van-swipe-item>
          </van-swipe>
          <!-- 通告 -->
          <div class="notice" v-if="showNotice">
            <div class="notice-left"></div>
            <div class="notice-center">
              <van-notice-bar
                :text="msgList.noticeName"
                left-icon="volume-o"
                :scrollable="true"
                @click="$router.push(`/newsDetail?id=${msgList.id}`)"
              />
            </div>
            <div class="notice-right"></div>
          </div>
          <!-- 中间主体部分 -->
          <div class="content">
            <!-- 币购买 -->
            <div class="buy">
              <div class="title">
                <h4>{{$t('m.oneClickRecharge')}}</h4>
                <!-- <span @click="$router.push(`/help`)">
                  {{$t('m.pProcess')}}
                  <van-icon name="question-o" />
                </span>-->
              </div>
              <div class="con">
                <p>1CNN = {{vcRatio}}VC</p>
                <div class="btn" @click="submintOrder">{{$t('m.rechargeNow')}}</div>
              </div>
            </div>
            <!-- 理财 -->
            <div class="manage" v-if="true">
              <div class="title">
                <h4>{{$t('m.manage')}}</h4>
                <span @click="redem(1)">
                  {{$t('m.more')}}
                  <van-icon name="arrow" />
                </span>
              </div>
              <div class="con m_con" @click="redem(1)">
                <!-- <div class="swiper-container" ref="banner">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in financialList" :key="index">
                      <img v-if="item.frames == 1" :src="item.productImage" />
                      <img v-else :src="item.productImage" @click="redem(item)" />
                    </div>
                  </div>
                </div>-->
                <div class="mc_top">
                  {{$t('m.financialProduct')}}
                  <span @click.stop="$router.push(`/financialProduct`)">
                    {{$t('m.lc4')}}
                    <i class="iconfont icon-more"></i>
                  </span>
                </div>
                <div class="mc_center">
                  <div class="text">{{product.vcAmount}} VC</div>
                  <div class="btn" @click.stop="$router.push(`/reservation?id=1`)">{{$t('m.buy')}}</div>
                </div>
                <div class="mc_bottom">
                  <span>{{product.cnnAmount}}{{$t('m.reservation')}}</span>
                  <p>{{$t('m.tips15_4')}}&nbsp;&nbsp;&nbsp;{{$t("m.tips15_5")}}</p>
                </div>
                <p
                  v-if="false"
                  style="color:#eee;font-size:.28rem;display:flex;align-items:center;height:100%;justify-content:center;"
                >
                  <span>{{$t('m.noManage')}}</span>
                </p>
              </div>
            </div>
            <!--基金产品-->
            <div class="fund_box" @click="toFund(1)">
              <div class="mc_top">
                  基金产品
                  <span>
                    查看详情
                    <i class="iconfont icon-more"></i>
                  </span>
                </div>
                <p class='desc'>理财产品可转入基金账户，享受每天0.013%的持币收益，以CNN形式发放</p>
                <div class="btn" @click.stop='goPage'>立即转入</div>
            </div>
            <!-- 活动和广告 -->
            <!-- <div class="ad" v-show="showAct"> -->
            <div class="ad" v-show="false">
              <div class="title">
                <h4>{{$t('m.promotions')}}</h4>
                <span @click="act">
                  {{$t('m.more')}}
                  <van-icon name="arrow" />
                </span>
              </div>
              <div class="con ad_img">
                <div class="swiper-container" ref="banner2">
                  <div class="swiper-wrapper">
                    <!--deling test 暂时的 -->
                    <div class="swiper-slide" style="position:relative;" @click="act">
                      <img src="@/assets/img/new2/ad@2x.png" />
                      <h3
                        style="position:absolute;top:.35rem;right:.6rem;color:#fff;font-size:.4rem;font-weight:bold;"
                      >{{$t("m.actT")}}</h3>
                      <p
                        style="position:absolute;top:.95rem;right:.9rem;color:#fff;font-size:.22rem;"
                      >{{$t('m.actT1')}}</p>
                    </div>
                    <!-- <div class="swiper-slide" v-for="(item, index) in activityList" :key="index">
                      <img :src="item.activityImage" @click="act(item)" />
                    </div>-->
                  </div>
                </div>
              </div>
            </div>
            <div class="iconGroup" v-if="false">
              <span class="iconitem bg-img"></span>
              <span class="iconitem bg-img"></span>
              <span class="iconitem bg-img"></span>
              <span class="iconitem bg-img"></span>
            </div>
            <div class="copyright bg-img"></div>
          </div>
          <!-- 充值历史 -->
          <div class="history" v-if="false">
            <div>
              <div
                :class="['title',oneList?'oneList':(twoList?'twoList':threeList?'threeList':'')]"
              >
                <h4 @click="oneListF">{{$t('m.rechargeRecord')}}</h4>
                <h4 @click="twoListF">{{$t('m.currencyIncome')}}</h4>
              </div>
              <div class="list oneList" v-show="oneList">
                <ul>
                  <van-list
                    v-model="loading"
                    :loading-text="$t('m.loading')"
                    :offset="100"
                    :finished="finished"
                    @load="onLoad"
                  >
                    <li class="item" v-for="(item,index) in list" :key="index">
                      <span>{{$t('m.recharge')}}</span>
                      <span>{{item.createTime}}</span>
                      <span v-if="item.txnType==1">+{{item.txnValue}} USDT</span>
                      <span v-else>+{{item.gccValue}} GCC</span>
                    </li>
                  </van-list>
                  <div v-show="list.length==0 || finished">
                    <van-divider
                      :style="{borderColor:'#e8e8e8',color:'#c7c7c7',margin:0}"
                    >{{$t('m.noMore')}}</van-divider>
                  </div>
                </ul>
              </div>
              <div class="list twoList" v-show="twoList">
                <ul>
                  <van-list
                    v-model="loading"
                    :loading-text="$t('m.loading')"
                    :offset="100"
                    :finished="finished"
                    @load="onLoad"
                  >
                    <li class="item" v-for="(item,index) in list1" :key="index">
                      <span>{{$t("m.currencyIncome")}}</span>
                      <span>{{item.pickDate}}</span>
                      <span>+{{item.profit}} GCC</span>
                    </li>
                  </van-list>

                  <div v-show="list1.length==0 ||finished">
                    <van-divider
                      :style="{borderColor:'#e8e8e8',color:'#c7c7c7',margin:0}"
                    >{{$t('m.noMore')}}</van-divider>
                  </div>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- </div> -->
      </Scroll>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
// import Swiper from "../../../static/js/swiper.min.js";
// import "../../../static/css/swiper.min.css";
import Header from "@/components/header";
import Footer from "@/components/footer";
import Scroll from "@/components/scroll";
import { Toast, NoticeBar, Swipe, SwipeItem } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {
        availableAmount: 0,
        freezeAmount: 0
      },
      bannerlist: [],
      timer: "",
      pageNum: 1,
      pageSize: 10,
      vcRatio: "", //配置兑换比例
      list: [],
      list1: [],
      loading: false,
      finished: false,
      currentPage: 0,
      sum: 0,
      coinsList: [],
      oneList: true,
      twoList: false,
      threeList: false,
      hideFlage: true,
      dailyProfit: 0,
      coin: 10,
      updateFlage: false,
      interUrl: "",
      animation: false,
      activityList: [], //活动列表
      financialList: [], //理财产品列表,
      freezeGccValue: 0, //锁仓
      showAct: true,
      msgList: "",
      showNotice: false,
      product: ""
    };
  },
  created() {
    this.changeTitle("GCC");
    this.changetabbarIndex(0);
    setTimeout(() => {
      this.animation = true;
    }, 1000);
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.getmsg();

    this.getBanner();
    // 重新获取数据 验证登录是否失效
    if (this.loginToken != "") {
      Services.getUser({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.userObj = res.user;
          this.dailyProfit = res.dailyProfit;
          this.freezeGccValue = res.freezeGccValue;
          localStorage.setItem("userObj", JSON.stringify(this.userObj));
          // this.getRecord();
        } else {
          //        console.log(res.msg);
          this.loading = false;
          this.finished = true;
          Toast(res.msg);
          localStorage.removeItem("token");
          localStorage.removeItem("userObj");
        }
      });
      // 获取泡泡
      // this.getDailyProfitList(0);
    } else {
      this.loading = false;
      this.finished = true;
    }
    // 验证活动时间是否结束
    // Services.getActivity({
    //   token: this.loginToken,
    //   id: 1,
    //   lang: localStorage.getItem("language")
    // }).then(response => {
    //   console.log(response);
    //   let resTime = response.activity.endTime;
    //   // let time = new Date().toLocaleDateString();
    //   let time = this.formatDateTime(new Date());
    //   if (time > resTime) {
    //     this.showAct = false;
    //   }
    // });
    // 随时获取币的汇率
    this.getConfig();
    let that = this;
    this.timer = setInterval(function() {
      if (!!that.loginToken) {
        that.getConfig();
      }
    }, 30000);
    //
    //理财产品列表
    let category = 0;
    if (localStorage.getItem("language") == "en_US") {
      category = 1;
    } else {
      category = 0;
    }
    // 理财信息
    Services.getProduct({
      id: 1
    }).then(res => {
      if (res.code == "0000") {
        this.product = res.product;
      } else {
        Toast(res.msg);
      }
    });
    // Services.financialList({
    //   pageNum: 1,
    //   pageSize: 99,
    //   category: category
    // }).then(res => {
    //   this.financialList = res.list;
    //   if (res.list.length > 1) {
    //     this.$nextTick(() => {
    //       //创建轮播
    //       var bannerSwiper = new Swiper(this.$refs.banner, {
    //         loop: true,
    //         autoplay: {
    //           delay: 5000,
    //           stopOnLastSlide: false,
    //           disableOnInteraction: false
    //         },
    //         autoplayDisableOnInteraction: false
    //       });
    //       bannerSwiper.update();
    //     });
    //   }
    // });
    //活动列表
    // Services.activityList({
    //   pageNum: 1,
    //   pageSize: 99,
    //   lang: localStorage.getItem("language")
    // }).then(res => {
    //   this.activityList = res.list;
    //   if (res.list.length > 1) {
    //     this.$nextTick(() => {
    //       //创建轮播
    //       var bannerSwiper2 = new Swiper(this.$refs.banner2, {
    //         loop: true,
    //         autoplay: {
    //           delay: 5000,
    //           stopOnLastSlide: false,
    //           disableOnInteraction: false
    //         },
    //         autoplayDisableOnInteraction: false
    //       });
    //       bannerSwiper2.update();
    //     });
    //   }
    // });
  },
  beforeDestroy() {
    // 组件销毁前调用
    clearInterval(this.timer);
  },
  components: {
    Scroll,
    Header,
    Footer
  },
  mounted() {
    setTimeout(() => {
      this.animation = true;
    }, 1000);
  },
  computed: {
    ...mapState({})
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    // 获取资讯
    getmsg() {
      Services.wdyNoticeList({
        noticeType: 2,
        pageNum: 1,
        pageSize: 1,
        lang: localStorage.getItem("language")
        // zyType: this.langType
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          if (res.list.length >= 1) {
            this.msgList = res.list[0];
            this.showNotice = true;
          }
        }
      });
    },
     goPage() {      
        this.$router.push(`/withFundInto?type=1`);     
    },
    // 获取banner
    getBanner() {
      Services.getBanners({
        bannerType: 1,
        lang: localStorage.getItem("language")
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          this.bannerlist = res.list;
        }
      });
    },
    oneListF() {
      this.oneList = true;
      this.twoList = false;
      this.threeList = false;
      this.currentPage = 0;
      this.sum = 0;
      this.loading = true; //下拉加载中
      this.finished = false; //下拉结束
      this.list = [];
      this.getRecord();
    },
    twoListF() {
      this.oneList = false;
      this.twoList = true;
      this.threeList = false;
      this.currentPage = 0;
      this.sum = 0;
      this.loading = true; //下拉加载中
      this.finished = false; //下拉结束
      this.list1 = [];
      this.onLoad();
    },
    threeListF() {
      this.oneList = false;
      this.twoList = false;
      this.threeList = true;
      this.list = [];
    },

    // 下拉刷新 deling 00
    onRefresh(done) {
      this.currentPage = 0;
      setTimeout(() => {
        done();
        this.getConfig();
        this.getDailyProfitList(0);
        var browser = {
          versions: (function() {
            var u = navigator.userAgent,
              app = navigator.appVersion;
            return {
              //移动终端浏览器版本信息
              trident: u.indexOf("Trident") > -1, //IE内核
              presto: u.indexOf("Presto") > -1, //opera内核
              webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
              gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
              mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
              android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
              iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
              iPad: u.indexOf("iPad") > -1, //是否iPad
              webApp: u.indexOf("Safari") == -1 //是否web应该程序，没有头部与底部
            };
          })()
        };
        if (browser.versions.mobile) {
          //判断是否是移动设备打开
          var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
          if (browser.versions.ios) {
            //          console.log("ios重载");
            window.location.reload();
          }
        }
        Toast(this.$t("m.refresh"));
        this.refresh = true;
        if (this.twoList) {
          this.getDailyProfitList(1);
        } else {
          this.list = [];
          this.getRecord();
        }
        this.isLoading = false;
        this.finished = false;
      }, 2000);
    },
    onInfinite(done) {
      setTimeout(() => {
        done(0);
      });
    },
    onLoad() {
      //    console.log("上拉加载");
      setTimeout(() => {
        if (this.currentPage != 0 && this.currentPage * 10 >= this.sum) {
          this.finished = true;
          return;
        }
        if (this.twoList) {
          this.getDailyProfitList(1);
        }
      }, 500);
    },
    // end
    // 获取持币收益记录
    getDailyProfitList(type) {
      // type 1 获取记录
      if (type == 1) {
        this.currentPage = this.currentPage + 1;
        Services.getDailyProfitList({
          token: this.loginToken,
          lang: localStorage.getItem("language"),
          status: type,
          pageNum: this.currentPage,
          pageSize: 10
        }).then(res => {
          //        console.log(res);
          if (res.code == "0000") {
            if (this.refresh) {
              this.list1 = [];
              this.refresh = false;
              Toast(this.$t("m.refresh"));
            }
            if (this.updateFlage) {
              this.updateFlage = false;
              this.list1 = res.list;
            } else {
              this.list1 = this.list1.concat(res.list);
            }
            this.sum = res.page.total;
            this.loading = false;
            // 数据全部加载完成  停止懒加载
            if (this.currentPage * 10 >= this.sum) {
              this.finished = true;
              // console.log("加载完成");
            }
          } else {
            this.loading = false;
            this.finished = true;
            Toast(res.msg);
          }
        });
      } else {
        // 获取泡泡数据
        this.getBubble(type);
      }
    },
    // 泡泡
    getBubble(type) {
      Services.getDailyProfitList({
        token: this.loginToken,
        lang: localStorage.getItem("language"),
        status: type,
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        //      console.log(res);
        if (res.code == "0000") {
          res.list.forEach(element => {
            this.$set(element, "state", true);
            this.$set(element, "hideItem", true);
          });
          this.coinsList = res.list;
        } else {
          Toast(res.msg);
        }
      });
    },
    // 点击摘取收益
    charge(item, index) {
      if (item.state) {
        this.$set(item, "state", !item.state);
        var that = this;
        //      console.log(item);
        Services.pickDailyProfit({
          token: this.loginToken,
          lang: localStorage.getItem("language"),
          id: item.id
        }).then(res => {
          if (res.code == "0000") {
            that.coin--;
            that.currentPage = 0;
            that.list1 = [];
            that.updateFlage = true;
            // 更新可用资产和记录列表
            Services.getUser({
              token: this.loginToken,
              lang: localStorage.getItem("language")
            }).then(res => {
              if (res.code == "0000") {
                this.userObj = res.user;
                localStorage.setItem("userObj", JSON.stringify(this.userObj));
              } else {
                //              console.log(res.msg);
                this.loading = false;
                this.finished = true;
                Toast(res.msg);
                localStorage.removeItem("token");
                localStorage.removeItem("userObj");
              }
            });
            that.getDailyProfitList(1);
            //          console.log("数量：" + that.coin);
            setTimeout(function() {
              that.$set(item, "hideItem", false);
            }, 2000);
            if (that.coin == 0) {
              setTimeout(function() {
                that.coin = 10;
                that.getBubble(0);
              }, 1000);
            }
          } else {
            Toast(res.msg);
          }
        });
        // this.hideFlage = true;
      } else {
        return;
      }
    },
    submintOrder() {
      if (!!this.loginToken) {
        // this.$router.push(`/buy`);
        this.$router.push(`/quotationTrade`);
      } else {
        this.$router.push(`/login`);
      }
    },
    // 获取充值记录
    getRecord() {
      this.currentPage = this.currentPage + 1;
      Services.getTxnList(this.loginToken, {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        lang: localStorage.getItem("language")
      }).then(res => {
        //      console.log(res);
        if (res.code == "0000") {
          this.list = this.list.concat(res.list);
          this.sum = res.page.total;
          this.loading = false;
          // 数据全部加载完成  停止懒加载
          if (this.currentPage * 10 >= this.sum) {
            this.loading = false;
            this.finished = true;
          }
        } else {
          this.loading = false;
          this.finished = true;
          Toast(res.msg);
        }
      });
    },
    // 获取汇率
    getConfig() {
      Services.getConfig({ lang: localStorage.getItem("language") }).then(
        res => {
          if (res.code == "0000") {
            this.vcRatio = res.vcRatio;
          }
        }
      );
    },
    //理财
    redem(item) {
      if (!this.loginToken) {
        this.$router.push(`/login`);
      } else {
        //      Services.getWdyUsdtOrder({
        //        token: this.loginToken,
        //        lang: localStorage.getItem("language")
        //      }).then(res => {
        //        if (res.code == "0000") {
        //          if (res.list.length > 0) {
        //            this.$router.push(`/financialProduct`);
        //          } else {
        //            this.$router.push(`/productDetails`);
        //          }
        //        } else {
        this.$router.push(`/productDetails?id=1`);
        // this.$router.push(`/productDetails?id=${item.productId}`);
        //        }
        //      });
      }
    },
     //理财
    toFund(item) {
      if (!this.loginToken) {
        this.$router.push(`/login`);
      } else {
        this.$router.push(`/fundDetails?id=1`);
      }
    },
    // 活动 deling test 这个活动暂时写死
    act() {
      // console.log(item);
      Services.getActivity({
        token: this.loginToken,
        id: 1,
        lang: localStorage.getItem("language")
      }).then(response => {
        console.log(response);
        let resTime = response.activity.endTime;
        // let time = new Date().toLocaleDateString();
        let time = this.formatDateTime(new Date());
        if (time > resTime) {
          this.showAct = false;
          Toast(this.$t("m.actEnd"));
          return;
        } else {
          this.$router.push(`/act?id=1`);
        }
      });
    },
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#home {
  width: 100%;
  height: 100%;
  // .scroll-box {
  //   background: linear-gradient(to bottom,#fff,#fefefe);
  // }
  .top {
    background: url("~@/assets/img/topbg.png") repeat-y center / 110% 120%;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    width: 100%;
    height: 8.5rem;
    position: relative;
    overflow: hidden;

    .planet {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // width: 5.65rem;
      // height: 5.68rem;
      background: url("~@/assets/img/new2/planet@2x.png") no-repeat;
      background-position: 50% 50%;
      background-size: 65%;

      // &.planetA {
      // animation: planetShow 3s 0s linear 1;
      // -webkit-animation: planetShow 3s 0s linear 1;
      // }
      @keyframes planetShow {
        0% {
          opacity: 0;
          transform: scale(0.7) translateX(-50%) translateY(-50%);
          -webkit-transform: scale(0.7) translateX(-50%) translateY(-50%);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateX(-50%) translateY(-50%);
          -webkit-transform: scale(1) translateX(-50%) translateY(-50%);
        }
      }
    }
    .planetCover {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5.2rem;
      height: 5.3rem;
      transform: rotate(0) translateX(-50%) translateY(-50%);
      -webkit-transform: rotate(0) translateX(-50%) translateY(-50%);
      background: url("~@/assets/img/new2/planetCover@2x.png") no-repeat center /
        100% 100%;
      &.planetCoverA {
        animation: planetCoverFade 60s 0s linear infinite;
        -webkit-animation: planetCoverFade 60s 0s linear infinite;
      }
      transform-origin: 0 0;
      @keyframes planetCoverFade {
        0% {
          transform: rotate(0) translateX(-50%) translateY(-50%);
          -webkit-transform: rotate(0) translateX(-50%) translateY(-50%);
        }
        100% {
          transform: rotate(360deg) translateX(-50%) translateY(-50%);
          -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);
        }
      }
    }
    .planetCover1 {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6.19rem;
      height: 6.28rem;
      opacity: 0.2;
      transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      background: url("~@/assets/img/new2/planetCover1@2x.png") no-repeat center /
        100% 100%;
      &.planetCover1A {
        animation: planetCover1Fade 10s 0s linear infinite;
        -webkit-animation: planetCover1Fade 10s 0s linear infinite;
      }
      @keyframes planetCover1Fade {
        0% {
          opacity: 0.4;
          transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
        }
        50% {
          opacity: 1;
          transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
        }
        100% {
          opacity: 0.4;
          transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
        }
      }
    }
    .coins {
      position: relative;
      width: 100%;
      height: 100%;
      // background: rgba(0, 0, 0, 0.5);
      .coin {
        position: absolute;
        width: 0.8rem;
        height: 0.8rem;
        > label {
          display: block;
          text-align: center;
          color: #fceba8;
          opacity: 1;
          position: absolute;
          z-index: 9;
          transform: translateX(-50%) translateY(0.26rem);
          bottom: -10%;
          left: 50%;
          font-size: 0.22rem;

          &.addCoin {
            animation: hideCoinNum 2s 0s 1;
          }
        }

        @keyframes hideCoinNum {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
            transform: translateX(-50%) translateY(-0.26rem);
          }
          100% {
            opacity: 0;
          }
        }
        &.hideItem {
          animation: rotateCoinItem 6s 0s infinite;
        }
        &:nth-of-type(1) {
          left: 22%;
          top: 3rem;
          animation: fade-liner 3s 0s infinite;
        }
        &:nth-of-type(2) {
          right: 38%;
          top: 4rem;

          animation: fade-liner 3.2s 0.2s infinite;
        }
        &:nth-of-type(3) {
          right: 31%;
          top: 5.5rem;
          animation: fade-liner 3.3s 0.3s infinite;
        }
        &:nth-of-type(4) {
          left: 20%;
          top: 5rem;
          animation: fade-liner 3.4s 0.4s infinite;
        }
        &:nth-of-type(5) {
          left: 40%;
          top: 5.5rem;
          animation: fade-liner1 4s 0s infinite;
          .coinItem {
            transform: translateX(-50%) translateY(-50%);
            &.hideItem {
              animation: hideCoinItem1 2s 0.5s 1;
            }
          }
        }
        &:nth-of-type(6) {
          right: 56%;
          top: 2rem;
          animation: fade-liner2 4.5s 0s infinite;
          .coinItem {
            transform: translateX(-50%) translateY(-50%);
            &.hideItem {
              animation: hideCoinItem2 2s 0.5s 1;
            }
          }
        }
        &:nth-of-type(7) {
          right: 20%;
          top: 4rem;
          animation: fade-liner 3.3s 0.1s infinite;
        }
        &:nth-of-type(8) {
          left: 34%;
          top: 3.75rem;
          animation: fade-liner 3.3s 0.3s infinite;
        }
        &:nth-of-type(9) {
          right: 20%;
          top: 2.5rem;
          animation: fade-liner 3.3s 0.2s infinite;
        }
        &:nth-of-type(10) {
          left: 53%;
          top: 2.5rem;
          animation: fade-liner 3.3s 0.1s infinite;
        }

        .coinItem {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          background: url("~@/assets/img/new/coin@2x.png") no-repeat center /
            100% 100%;
          transform: translateX(-50%) translateY(-50%);
          &.hideItem {
            animation: hideCoinItem 2s 0.5s 1;
          }
        }
      }
      @keyframes hideCoinItem {
        0% {
          transform: translateX(-50%) translateY(-50%) rotateY(0deg);
        }
        10% {
          transform: translateX(-50%) translateY(-70%) rotateY(360deg);
        }
        100% {
          transform: translateX(-50%) translateY(30%) rotateY(720deg);
          opacity: 0;
        }
      }
      @keyframes hideCoinItem1 {
        0% {
          transform: translateX(-50%) translateY(-50%) rotateY(0deg);
        }
        10% {
          transform: translateX(-50%) translateY(-70%) rotateY(360deg);
        }
        100% {
          transform: translateX(-50%) translateY(40%) rotateY(720deg);
          opacity: 0;
        }
      }
      @keyframes hideCoinItem2 {
        0% {
          transform: translateX(-50%) translateY(-50%) rotateY(0deg);
        }
        10% {
          transform: translateX(-50%) translateY(-70%) rotateY(360deg);
        }
        100% {
          transform: translateX(-50%) translateY(50%) rotateY(720deg);
          opacity: 0;
        }
      }
      @keyframes rotateCoinItem {
        0% {
          transform: rotateY(0deg) translateY(-0.2rem);
        }
        50% {
          transform: rotateY(180deg) translateY(-0.6rem);
        }
        100% {
          transform: rotateY(720deg) translateY(-0.2rem);
        }
      }

      @keyframes fade-liner {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 1;
          transform: translateY(-0.2rem);
        }
        100% {
          opacity: 1;
        }
      }

      @keyframes fade-liner1 {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 1;
          transform: translateY(-0.2rem);
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes fade-liner2 {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 1;
          transform: translateY(-0.2rem);
        }
        100% {
          opacity: 1;
        }
      }
    }
    .notice {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .version {
      position: absolute;
      bottom: 0.2rem;
      right: 0.3rem;
      color: #fff;
      opacity: 0.7;
    }
  }
  .leftMenu {
    margin-top: 0.4rem;
    position: relative;
    width: 100%;
    .menuBox {
      width: 100%;
      height: 2.15rem;
      color: #fff;
      overflow: hidden;
      display: flex;
      .menuList {
        width: 100%;
        padding: 0 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: calc(50% - 0.13rem);
          height: 100%;
          border-radius: 0.15rem;
          // background: linear-gradient(right, #b1b1b5, #f4f4f4);
          background: url("~@/assets/img/topbg.png") repeat-y center / 160% 120%;
          box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
          span {
            color: #40404c;
            display: flex;
            align-items: center;
            height: 0.63rem;
          }
          img {
            width: 0.85rem;
            height: 0.85rem;
          }
          &:first-child {
            img {
              height: 0.86rem;
            }
          }
          label {
            display: flex;
            align-items: center;
            height: 0.67rem;
            color: #e4b577;
          }
        }
      }
    }
  }
  // 顶部轮播
  .headerBanner {
    height: 3.5rem;
    width: 100%;
    background: #f0f0f0;
  }
  .notice {
    .van-notice-bar {
      background: #fff;
      color: #e4b577;
    }
  }
  .rootMain {
    background: #e3e3e3;
    background: #f2f2f2;
  }
  // 主体
  .content {
    padding: 0 0.5rem 1rem;
    > div {
      margin-top: 0.4rem;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.1rem;
        h4 {
          height: 0.3rem;
          line-height: 0.3rem;
          font-size: 0.28rem;
          text-align: center;
          font-weight: bold;
          letter-spacing: 0.02rem;
          color: #40404c;
        }
        span {
          font-size: 0.24rem;
          color: #40404c;
          display: flex;
          align-items: center;
          i {
            margin-left: 0.05rem;
          }
        }
      }
      .con {
        // background: linear-gradient(right, #b1b1b5, #f4f4f4);
        background: #fff;
        border-radius: 0.15rem;
        box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
      }
      &.buy {
        .title {
          span {
            align-items: flex-start;
            i {
              transform: translateY(-0.1rem);
            }
          }
        }
        .con {
          height: 1.96rem;

          p {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 0.98rem;
            font-size: 0.38rem;
            font-weight: bold;
            letter-spacing: 0.03rem;
            text-align: center;
            color: #fd6262;
          }
          .btn {
            margin: 0 auto;
            width: 2rem;
            height: 0.75rem;
            line-height: 0.75rem;
            font-size: 0.22rem;
            letter-spacing: 0.05rem;
            text-align: center;
            color: #fff;
            // background: url("~@/assets/img/new2/btnbg@2x.png") no-repeat center /
            //   100% 100%;
            background: linear-gradient(right, #ecca96, #d0a060);
          }
        }
      }
      &.manage {
        .m_con {
          height: 3.74rem;
          box-sizing: border-box;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0 0.3rem;
          > div {
            display: flex;
          }
          .mc_top {
            font-size: 0.4rem;
            color: #e4b577;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 0.26rem;
              color: #7c7b7f;
              display: flex;
              align-items: center;
            }
          }
          .mc_center {
            align-items: center;
            justify-content: space-between;
            .text {
              font-size: 0.38rem;
              font-weight: bold;
              letter-spacing: 0.03rem;
              color: #fd6262;
            }
            .btn {
              margin: 0;
              width: 2rem;
            }
          }
          .mc_bottom {
            align-items: center;
            justify-content: space-between;
            p {
              color: #7c7b7f;
            }
          }

          // .swiper-container {
          //   width: 100%;
          //   height: 100%;
          // }
        }
      }
      &.fund_box{
          box-sizing: border-box;
          width: 100%;
          padding: 0.3rem;
          background: #fff;
          border-radius: .15rem;
         >.mc_top {
            font-size: 0.4rem;
            color: #e4b577;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 0.26rem;
              color: #7c7b7f;
              display: flex;
              align-items: center;
            }
          }
          >.desc{
               color: #40404c;
                margin-top: .3rem;
                line-height: .46rem;
          }
          .btn{
            border-radius: .1rem;
            margin: .3rem auto 0;
            width: 2rem;
            height: 0.75rem;
            line-height: 0.75rem;
            font-size: 0.22rem;
            letter-spacing: 0.05rem;
            text-align: center;
            color: #fff;
            background: -webkit-gradient(linear, right top, left top, from(#ecca96), to(#d0a060));
            background: linear-gradient(right, #ecca96, #d0a060);
          }
      }
      &.ad {
        .ad_img {
          width: 100%;
          height: 1.87rem;
          box-sizing: border-box;
          overflow: hidden;
          .swiper-container {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .iconGroup {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .iconitem {
        width: 40px;
        height: 40px;
        // background: #f8f8f8;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        &:nth-of-type(1) {
          background-image: url("~@/assets/img/common/zhifubao.png");
        }
        &:nth-of-type(2) {
          background-image: url("~@/assets/img/common/weixin.png");
        }
        &:nth-of-type(3) {
          background-image: url("~@/assets/img/common/taobao.png");
        }
        &:nth-of-type(4) {
          background-image: url("~@/assets/img/common/jingdong.png");
        }
      }
    }
    .copyright {
      height: 1.5rem;
      background: url("~@/assets/img/fuze/copyright.png") no-repeat center /
        100% 100%;
    }
  }

  .history {
    margin-top: 0.4rem;
    padding-bottom: 0.2rem;
    > div {
      overflow: hidden;
      background: #f8f8f8;
      .title {
        padding: 0 0.5rem;
        display: flex;
        justify-content: flex-start;
        height: 0.75rem;
        h4 {
          height: 0.75rem;
          position: relative;
          margin-right: 0.3rem;
          line-height: 0.75rem;
          font-size: 0.26rem;
          font-weight: bold;
          text-align: left;
          letter-spacing: 0.02rem;
          color: #a8a7ab;
          border-bottom: 0.02rem solid transparent;

          &::before {
            position: absolute;
            left: -0.215rem;
            top: 50%;
            transform: translateY(-50%);
            width: 0.03rem;
            height: 40%;
            background: #a8a7ab;
            content: "";
            display: block;
          }
          &:nth-of-type(1) {
            &::before {
              display: none;
            }
          }
        }
        &.oneList {
          h4 {
            &:nth-of-type(1) {
              color: #40404c;
              border-bottom: 0.02rem solid #e4b577;
            }
          }
        }
        &.twoList {
          h4 {
            &:nth-of-type(2) {
              color: #40404c;
              border-bottom: 0.02rem solid #e4b577;
            }
          }
        }
        &.threeList {
          h4 {
            &:nth-of-type(3) {
              color: #fff;
            }
          }
        }
        > ul {
          display: flex;
          justify-content: space-around;
          align-items: center;
          li {
            width: 25%;
            font-size: 0.26rem;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }

    .list {
      position: relative;
      &.oneList {
        &::before {
          left: 0.4rem;
        }
      }
      &.twoList {
        &::before {
          left: 1.8rem;
        }
      }
      ul {
        min-height: 3rem;
        background: #fff;
        padding: 0.1rem 0;
        li {
          padding: 0 0.45rem;
          width: 100%;
          height: 0.75rem;
          line-height: 0.75rem;
          font-size: 0.24rem;
          color: #8a8a8a;
          font-weight: normal;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f2f2f2;
          align-items: center;
          &:nth-of-type(2n) {
            background: #f8f8f8;
          }
          &:nth-last-of-type(1) {
            border-bottom: none;
          }
          span {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #8a8a8a;
            &:first-child {
              width: 20%;
            }
            &:nth-of-type(2) {
              width: 45%;
            }
            &:last-child {
              flex: 1;
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }
}
</style>